<template>
  <div class="container">
    <div
        class="card"
        v-for="item in cardsArr"
        :key="item.color"
        :style="{'--clr': item.color}">
    </div>
  </div>
</template>

<script setup>
 import { onMounted } from "vue";
 const cardsArr = [{color:'#f00'},{color:'#0f0'},{color:'#0fe'},{color:'#ff0'}]

 onMounted(()=>{
   const cards = document.querySelectorAll('.card');
   cards.forEach(card => {
     card.onmousemove = (event) => {
       const { pageX, pageY } = event;
       const x = pageX - card.offsetLeft,
           y = pageY - card.offsetTop;
       card.style.setProperty('--x', x + 'px');
       card.style.setProperty('--y', y + 'px');
     }
   });
 })
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #222;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

.container .card {
  width: 300px;
  height: 300px;
  background-color: rgba(45, 45, 45, 1);
  border-radius: 20px;
  overflow: hidden;

  position: relative;
}

.container .card::before {
  content: "";
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);

  width: 600px;
  height: 600px;
  background: radial-gradient(var(--clr), transparent, transparent);
  opacity: 0;
  transition: opacity 0.5s;
}

.container .card:hover::before {
  opacity: 1;
}

.container .card::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 18px;
  background-color: rgba(45, 45, 45, 0.75);
}



@media screen and (max-width: 768px) {
  .container {
    gap: 30px;
  }

  .container .card {
    width: 150px;
    height: 150px;
  }

  .container .card::before {
    width: 300px;
    height: 300px;
  }
}
</style>
